
// memo作用：memo 允许你的组件在 props 没有改变的情况下跳过重新渲染。（父组件重新渲染时如果子组件内未发生变化则不用重新渲染）
// 注意：1.prop是简单类型时候（数字，字符串等）时候——Object.is(3, 3) => true 没有变化
// 2.prop是引用类型（对象 / 数组）时候Object([], []) => false 有变化，React只关心引用是否变化

// useCallback作用：在组件多次重新渲染的时候缓存函数（解决memo的prop是引用类型时候重复加载子组件问题）
import { useState,useEffect, memo, useCallback } from 'react'
import Top from './top'
import Left from './left'
import RightItem from './item'
import { Link, useSearchParams } from "react-router-dom"


const MemoSon = memo(function RightItem({name}){
  console.log('我是子组件,其他页面变化关我什么事')
  return <div>{name}我是memo子组件</div>
})
function App() {
  // 接收传参
  const [params] = useSearchParams()
  const id = params.get('id')
  const name = params.get('name')
 console.log(id, '接收传参', name)



  const topList = ['宠物', '评价', '商家'];
  const leftList = ['博美', '金毛'];
  const itemList1 = [
    {src:'https://img1.baidu.com/it/u=2431080333,1063563004&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',name:'博美1',num:'1',price:'100'},
    {src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F09bfc45a-aadf-4155-9c2d-da1c4c12ebca%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706194001&t=a63feec475e515f582d9ea7401ccbac3',name:'博美2',num:'2',price:'600'}
  ]
  const itemList2 = [
    {src:'https://img2.baidu.com/it/u=313426046,2640147331&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313',name:'金毛1',num:'1',price:'600'},
    {src:'https://img1.baidu.com/it/u=282508326,2357126611&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1200',name:'金毛2',num:'2',price:'800'}
  ]
  const [ itemList, setItemList ] = useState([])
  useEffect(()=>{
    console.log('useEffect')
    setItemList(itemList1)
  },[])
  // -------左边点击按钮-------
  const [leftNum, setLeftNum] = useState(0)
  const leftBtn = (num) =>{
    console.log('左边点击按钮',num)
    setLeftNum(num)
    if(num === 0){
      setItemList(itemList1)
    }else{
      setItemList(itemList2)
    }
  }
  // -------------点击添加按钮-------------
  const [addBox, setAddBox] = useState([])
  const itemAdd = (item) =>{
    let nowBox = [...addBox,item];
    setAddBox(nowBox)
    console.log(nowBox,'点击添加按钮')
  }
  const aaa= useCallback([1,2,3],[])
  return (
    <div>
      <div className='flex'>这里是购物车</div>
        <MemoSon name={aaa}/>
          <Link to="/login">登录</Link>
      <div className='flex-l top'>
        { topList.map((item, index) => <Top item={item} index={index} key={index}/>)}
      </div>
      <div className='flex-l'>
        <div className='left'>
          { leftList.map((item, index) => <Left item={item} index={index} num={leftNum} key={index} btn={leftBtn}/>)}
        </div>
        <div className='right'>
          <div>一人套餐</div>
          <div className='right-box'>
            { itemList.map((item, index) => <RightItem item={item} index={index} key={index} add={itemAdd}/>)}
          </div>
        </div>
      </div>
      <div>统计</div>
      <div className='cart'>
        {addBox.map((item, index)=><RightItem item={item} index={index} key={index} add={itemAdd}/>)}
      </div>
    </div>
  )
}

export default App;
